<!DOCTYPE html>
<html lang="en">
<head>
    <title>缓存监控</title>
    <#include "/sys/newheader.html"/>
    <link rel="stylesheet"
          href=${base}/statics/plugins/layout/jquery.layout-latest.css?_${.now?string['yyyyMMddhhmmSS']}">
    <script src="${base}/statics/plugins/layout/jquery.layout-latest.js?_${.now?string['yyyyMMddhhmmSS']}"></script>
</head>
<body>
    <div class="ui-layout-west">
        <div class="main-content">
            <div class="box box-main">
                <div class="box-header">
                    <div class="box-title">
                        <i class="fa icon-social-dribbble"></i> 缓存列表
                    </div>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新"><i
                                class="fa fa-refresh"></i></button>
                    </div>
                </div>
                <div class="ui-layout-content pr0 pb0">
                    <div class="form-inline">
                        <div class="form-group">
                            <div class="control-inline">
                                <input type="text" class="form-control" id="qryCond_cacheName"  placeholder="缓存名称"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-sm" onclick="qryCacheName()" >查询</button>
                        </div>
                    </div>
                    <table id="dataGrid"></table>
                    <div id="dataGridPager"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="ui-layout-center" >
        <div class="main-content">
            <div class="box box-main">
                <div class="box-header">
                    <div class="box-title">
                        <i class="fa icon-menu"></i> 键名列表
                        <label STYLE="color: red">（最多显示100条数据）</label>
                    </div>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" id="btnRefreshKeys" title="刷新"><i
                                class="fa fa-refresh"></i></button>
                    </div>
                </div>
                <div class="ui-layout-content pr0 pb0">
                    <div class="form-inline">
                        <div class="form-group">
                            <div class="control-inline">
                                <input type="text" class="form-control" id="qryCond_cacheKey"  placeholder="缓存键名"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-sm" onclick="qryCacheKey()" >查询</button>
                        </div>
                    </div>
                    <table id="dataGridKeys"></table>
                </div>
            </div>
        </div>
    </div>
    <div class="ui-layout-east" id="rrapp">
        <div class="main-content">
            <div class="box box-main">
                <div class="box-header">
                    <div class="box-title">
                        <i class="fa icon-notebook"></i> 缓存内容
                    </div>
                    <div class="box-tools pull-right">
                    </div>
                </div>
                <div class="ui-layout-content">
                    <form id="" action="" method="" class="form-horizontal">
                        <div class="box-body">
                            <div class="row m0">
                                <div class="col-xs-12">
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            缓存名称：
                                            <input type="text" id="cacheName" name="cacheName"  v-model="cacheInfo.cacheName"
                                                   class="form-control"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row m0">
                                <div class="col-xs-12">
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            缓存键名：
                                            <input type="text" id="cacheKey" name="cacheKey"  v-model="cacheInfo.cacheKey"
                                                   class="form-control"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row m0">
                                <div class="col-xs-12">
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            缓存内容：
                                            <textarea id="cacheValue" name="cacheValue" rows="6" v-model="cacheInfo.cacheValue"
                                                      class="form-control autoHeight"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 初始化布局
    $(document).ready(function () {
        // 初始化布局
        $('body').layout({
            west__size: '35%',
            east__size: '35%',
            onresize: function () {
// 		setTimeout(function(){
                $(window).resize();
// 			$("#dataGrid").dataGrid('resize')
// 			setTimeout(function(){
// //	 			$(window).resize();
// 				$("#dataGridKeys").dataGrid('resize')
// 			},1000);
// 		},200);
            }
        });
    });

   var cacheName = "";
    $(function () {
        $("#dataGrid").jqGrid({
            url: '../monitorCache/list',
            datatype: "json",
            colModel: [
                {label: 'id', name: 'id', width: 50, hidden: true, key: true},
                {label: '缓存名称', name: 'cacheName', index: 'cache_name', width: 50},
                {label: '失效时间', name: 'expireDate', index: 'expire_date', width: 80},
                {
                    label: '操作',
                    name: 'actions',
                    width: 30,
                    align: "center",
                    sortable: false,
                    title: false,
                    formatter: function (val, obj, row, act) {
                        var actions = [];
                        actions.push('<a href="javascript:" class="btnList" title="清理缓存" data-confirm="确认要清理该缓存吗？" data-click="deleteCacheInfo(\''+row.cacheName+'\')"><i class="fa fa-trash-o"></i></a>&nbsp;');
                        return actions.join('');
                    }
                }
            ],
            viewrecords: true,
            height: 700,
            rowNum: 20,
            rowList: [20, 30, 50],
            rownumbers: true,
            rownumWidth: 25,
            autowidth: true,
            multiselect: false,
            pager: "#dataGridPager",
            jsonReader: {
                root: "page.data",
                page: "page.pageNo",
                total: "page.pageCount",
                records: "page.count"
            },
            prmNames: {
                page: "page",
                rows: "limit",
                order: "order"
            },
            onSelectRow: function (id) {
                var rowData = $("#dataGrid").jqGrid('getRowData', id);
                cacheName = rowData.cacheName;
                $("#qryCond_cacheKey").val('');
                $("#dataGridKeys").jqGrid('setGridParam', {
                    postData: {
                        'cacheName': rowData.cacheName,'keyName':''
                    }
                }).trigger("reloadGrid");
            },
            gridComplete: function () {
                //隐藏grid底部滚动条
                //$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
                btnMoreEventBind("dataGrid");
            }
        });


        $("#dataGridKeys").jqGrid({
            url: '../monitorCache/cacheKeys',
            datatype: "json",
            colModel: [
                {label: '缓存键名', name: 'keyName', width: 40, key: true},
                {
                    label: '操作',
                    name: 'actions',
                    width: 30,
                    align: "center",
                    sortable: false,
                    title: false,
                    formatter: function (val, obj, row, act) {
                        var actions = [];
                        actions.push('<a href="javascript:" class="btnList" title="清理缓存" data-confirm="确认要清理该缓存吗？" data-click="deleteCacheInfo(\''+cacheName+'\',\''+row.keyName+'\')"><i class="fa fa-trash-o"></i></a>&nbsp;');
                        return actions.join('');
                    }
                }
            ],
            viewrecords: true,
            height: 800,
            rownumbers: true,
            rownumWidth: 40,
            rowNum:-1,
            autowidth: true,
            multiselect: false,
            jsonReader: {
                root: "resData"
            },
            onSelectRow: function (id) {
                var rowData = $("#dataGridKeys").jqGrid('getRowData', id);
                vm.getCacheInfo(rowData.keyName);
            },
            gridComplete: function () {
                //隐藏grid底部滚动条
                //$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
                btnMoreEventBind("dataGridKeys");
            }
        });
    });

    function deleteCacheInfo(cacheName,keyName) {
        $.ajax({
            type: "get",
            url: "../monitorCache/deleteCacheInfo",
            data: {"keyName": keyName,"cacheName":cacheName},
            async: false,
            dataType: "json",
            success: function (data) {
                if (data.code == 0) {
                    if(keyName == 'undefined'||null == keyName){
                        $("#dataGrid").trigger("reloadGrid");
                    }else{
                        $("#dataGridKeys").trigger("reloadGrid");
                    }
                }
            }
        });

    }
   function qryCacheName() {
       var qryCacheName = $("#qryCond_cacheName").val();

       $("#dataGrid").jqGrid('setGridParam', {
           postData: {
               'cacheName': qryCacheName
           }
       }).trigger("reloadGrid");
   }
    
   function qryCacheKey() {
       var qryCacheKey = $("#qryCond_cacheKey").val();
       $("#dataGridKeys").jqGrid('setGridParam', {
           postData: {
               'cacheName': cacheName,'keyName':qryCacheKey
           }
       }).trigger("reloadGrid");
   }

    var vm = new Vue({
        el:'#rrapp',
        data:{
            cacheInfo:{
            }
        },
        methods: {
            getCacheInfo: function(keyName){
                $.ajax({
                    type: "get",
                    url: "../monitorCache/getCacheInfo",
                    data: {"keyName": keyName,"cacheName":cacheName},
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 0) {
                            vm.cacheInfo = data.cacheInfo;
                        }
                    }
                });
            }
        }
    });
</script>
</html>